<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <!--搜索模板筛选表单-->
    <el-form :inline="true">
      <!--模板搜索输入框-->
      <el-form-item prop="searchTemplate">
        <el-input v-model="temName" suffix-icon="el-icon-search" placeholder="请输入模板名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <!--搜索按钮-->
        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
        <!--新建模板按钮-->
        <el-button type="primary" icon="el-icon-plus" @click="add">新建模板</el-button>
      </el-form-item>
    </el-form>

    <!--模板列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <!--表头-->
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="temName" label="模板名" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <div class="operation_show" slot-scope="scope">
          <!--预览当前模板是什么样的按钮-->
          <el-button type="success" icon="el-icon-info" @click="preview(scope.row)">预览</el-button>
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <!--删除当前模板按钮-->
            <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left:10px">删除</el-button>
          </el-popconfirm>
        </div>
      </el-table-column>
    </el-table>

    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </div>

    <!--新建模板对话框-->
    <el-dialog title="新建模板信息" :visible.sync="addFormVisible" width="50%" @close="flushC = false">
      <!--新建模板信息表单-->
      <el-form>
        <!--模板名输入框-->
        <el-form-item label="模板名：" label-width="140px">
          <el-input v-model="addForm.temName" placeholder="请输入模板名" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--分割线-->
        <el-divider content-position="center">以下为模板可选字段点击生成表单</el-divider>
        <!--多选框组 选择是否需要这些字段的输入框-->
        <el-form-item prop="checked" align="center">
          <el-checkbox  v-model="addForm.isRepr" :true-label="1" :false-label="0" label="法人代表"></el-checkbox>
          <el-checkbox  v-model="addForm.isCateg" :true-label="1" :false-label="0" label="医院类别"></el-checkbox>
          <el-checkbox  v-model="addForm.isPro" :true-label="1" :false-label="0" label="医院主办单位性质"></el-checkbox>
          <el-checkbox  v-model="addForm.isEco" :true-label="1" :false-label="0" label="医院经济类型"></el-checkbox>
        </el-form-item>
        <!--部门级联选择器-->
        <el-form-item label="部门名称：" label-width="140px">
          <!--使用子组件-->
          <DepSelect v-if="flushC"></DepSelect>
        </el-form-item>
        <!--医疗机构选择器-->
        <el-form-item  label-width="140px">
          <template slot="label">
            <el-tooltip placement="bottom" style="margin-right: 5px">
              <div slot="content">没有找到您的医疗机构？请联系管理员</div>
              <i class="el-icon-question icon-color"></i>
            </el-tooltip>
            <span>医疗机构代码：</span>
          </template>
          <HospitalSearch v-if="flushC"></HospitalSearch>
        </el-form-item>
        <!--医院地址输入框-->
        <el-form-item label="医院地址：" label-width="140px">
          <el-input v-model="addForm.address" placeholder="请输入医院地址" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--医生人数输入框-->
        <el-form-item label="医生人数：" label-width="140px">
          <el-input v-model="addForm.医生人数" placeholder="请输入医生人数" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--法人代表输入框  可选-->
        <el-form-item label="法人代表：" label-width="140px" v-if="addForm.isRepr">
          <el-input  placeholder="请输入法人代表" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院类别输入框  可选-->
        <el-form-item label="医院类别：" label-width="140px" v-if="addForm.isCateg">
          <el-input  placeholder="请输入医院类别" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院主办单位性质输入框  可选-->
        <el-form-item label="医院主办单位性质：" label-width="140px" v-if="addForm.isPro">
          <el-input  placeholder="请输入医院主办单位性质" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院经济类型输入框  可选-->
        <el-form-item label="医院经济类型：" label-width="140px" v-if="addForm.isEco">
          <el-input  placeholder="请输入医院经济类型" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--新建模板对话框按钮-->
      <div slot="footer">
        <!--关闭对话框按钮-->
        <el-button @click="addFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveAdd">保存</el-button>
      </div>
    </el-dialog>

    <!--模板预览对话框-->
    <el-dialog title="模板预览" :visible.sync="previewVisible">
      <!--描述列表-->
      <el-descriptions :column="1" :colon="false" border :labelStyle="LS">
        <el-descriptions-item prop="temName" label="模板名">{{this.temName2}}</el-descriptions-item>
        <el-descriptions-item label="部门名称">这里填写部门名称</el-descriptions-item>
        <el-descriptions-item label="医疗机构代码">这里填写医疗机构代码</el-descriptions-item>
        <el-descriptions-item label="医院地址">这里填写医院地址</el-descriptions-item>
        <el-descriptions-item label="医生人数">这里填写医生人数</el-descriptions-item>
        <el-descriptions-item label="法人代表" v-if="isReveal[0]">这里填写法人代表</el-descriptions-item>
        <el-descriptions-item label="医院类别" v-if="isReveal[1]">这里填写医院类别</el-descriptions-item>
        <el-descriptions-item label="医院主办单位性质" v-if="isReveal[2]">这里填写医院主办单位性质</el-descriptions-item>
        <el-descriptions-item label="医院经济类型" v-if="isReveal[3]">这里填写医院经济类型</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>

import DepSelect from "@/components/DepSelect";
import HospitalSearch from "@/components/HospitalSearch";
export default {
  name: "TemplateList",
  components: {HospitalSearch, DepSelect},
  data(){
    return{
      currentPage:1,
      tableData:[],
      total:0,
      pagenum:1,
      pagesize:10,
      flushC: false,
      adminid: this.$store.state.id,
      temName:"",  //搜索框用来搜索的变量
      temName2:"",  //用来给预览的模板名赋值的变量
      tableHeight:"",
      addFormVisible: false,
      addForm:{},
      previewVisible: false,
      isReveal:[false,false,false,false],
      LS:{
        width: '150px'
      }
    }
  },
  created() {
    this.load(); //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods: {
    //搜索或刷新功能
    load() {
      this.request.get("/template/findAll/" + this.pagenum + "/" + this.pagesize + "/" + this.adminid + "/" + this.temName)
          .then(res => {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //分页查询
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //显示新建模板对话框
    add() {
      this.flushC = true
      this.addForm = {
        isRepr:0,
        isCateg:0,
        isPro:0,
        isEco:0
      }    //每次打开新建模板对话框时清空表单数据，这样不会保留上次填写时留下的数据
      this.addFormVisible = true    //显示新建模板对话框
    },

    //新建模板功能
    saveAdd() {
      this.addForm.adminid = this.adminid
      this.request.post("/template/newTemplate", this.addForm).then(res => {
        if (res.data.code === '200') {
          this.$message.success("保存成功")
          this.addFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },

    //显示预览模板信息对话框，判断可选字段是否显示
    preview(row){
      this.previewVisible = true
      for(let i in this.tableData){
        if(this.tableData[i].id === row.id){
          this.temName2 = this.tableData[i].temName
          if(this.tableData[i].isRepr === 1){    //若法人代表布尔值为1显示
            this.isReveal[0] = true
          }else{             //若法人代表布尔值为0不显示
            this.isReveal[0] = false
          }
          if(this.tableData[i].isCateg === 1){   //若医院类别布尔值为1显示
            this.isReveal[1] = true
          }else{              //若医院类别布尔值为0不显示
            this.isReveal[1] = false
          }
          if(this.tableData[i].isPro === 1){      //若医院主办单位性质布尔值为1显示
            this.isReveal[2] = true
          }else{          //若医院主办单位性质布尔值为0不显示
            this.isReveal[2] = false
          }
          if(this.tableData[i].isEco === 1){        //若医院经济类型布尔值为1显示
            this.isReveal[3] = true
          }else{         //若医院经济类型布尔值为0不显示
            this.isReveal[3] = false
          }
        }
      }
    },

    //删除模板功能
    del(id) {
      this.request.delete("/template/delete/" + id).then(res => {
        if (res.data.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },

    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  }
}
</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>